<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>会员列表</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>搜索信息</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="name" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="userTable" lay-filter="userTable"></table>
    </div>

</div>


<script id="tool" type="text/html">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script id="photo" type="text/html">
    {{# if(d.isUpdate==0){ }}
    <img src="/file/fc/showImg/{{d.photoPath}}" style="border-radius: 25px;width: 25px;height: 25px">
    {{# }}}
</script>


<script>
    var active;
    layui.use(['table','form','layer'],function(){
        var table =layui.table,form=layui.form;
        layer=layui.layer;
        //加载动态表格

        table.render({
            elem:'#userTable',
            height:'full-160',
            page:true,//分页
            url:'/system/uc/find/?roleIds=1',
            defaultToolbar:['filter','exports','print'],//默认工具条
            toolbar:'#tableBar',//工具条
            cols:[
                [
                    {type:'numbers',fixed:'left'},
                    {type:'checkbox',fixed:'left'},
                    {field:'id',title:'用户ID',sort:true},//sort排序
                    {field:'photoPath',title: '头像',width:100,templet:'#photo',align: 'center'},
                    {field:'userName',title:'用户昵称',align: 'center'},
                    {field:'sex',title:'性别',
                        templet:function (res){
                            if(res.sex==1){
                                return "男"
                            }
                            else if(res.sex==0){
                                return "女";
                            }
                        },
                        align: 'center'

                    },
                    {field:'mobile',title:'手机号'},
                    {field:'level',title:'用户等级',
                        templet: function(obj){
                            if (obj.level==1){
                                return "<span style='color: #00f'>普通用户</span>"
                            }else if (obj.level==2){
                                return "<span style='color: #FF0000'>vip用户</span>"
                            }else if (obj.level==3){
                                return "<span style='color: #FFD700'>高级vip用户</span>"
                            }
                        },
                        align: 'center'},
                    {field:'state',title:'状态',
                        templet:function (sta) {
                            if (sta.state==0){
                                return "可用"
                            }else if (sta.state==1){
                                return "不可用";
                            }
                        }
                        ,align: 'center'},
                    {fixed:'right',title:'操作',align:'center',toolbar:'#tool'}

                ]
            ]

        })



        //监听搜索按钮
        form.on('submit(searchBtn)',function(data){
            var dataForm = data.field;
            console.log(dataForm);
        })


        active={
            update:function (content) {
                var b=false;
                top.layer.open({
                    type:2,
                    content: content,
                    area:['750px','600px'],
                    btn:['保存','取消'],
                    btn1:function (i,o) {
                        b=true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function (i,o) {
                        if(b) layui.table.reload('userTable');
                    }

                })
            },
        }


        //监听表格行工具条事件
        table.on('tool(userTable)',function(obj){
            var event =obj.event;
            if(event =='edit'){
                active.update('/page/memberManagement/userVipEdit/'+obj.data.id);
            }
        })

    })
</script>
</body>
</html>
